<?php
    include('header.php');
    
    $db = db_connect();
    
    $sql = 'SELECT * FROM showcase ORDER BY showcase_id DESC';
    $result = mysql_query($sql);
    $i = 1;
    $showcase_lits = '';
    $showcase_detail_place = '';
    $showcase_detail_img = '';
    $showcase_detail_ = '';
    $showcase_id = '';
    
    while($row=mysql_fetch_assoc($result)){
	
	if(file_exists('images/showcase/'.$row['showcase_id'].'/'.$row['showcase_img']) && trim($row['showcase_img'])!=''){
	    $img__ = $row['showcase_id'].'/'.$row['showcase_img'];
	}else{
	    $img__ = 'no-pic.jpg';
	}
	
	if($i==1){
	    $showcase_lits .=<<<showcase_lits
	    <li id="{$row['showcase_id']}">
		<img src="images/showcase/{$img__}" alt="{$row['showcase_place']}" class="showcase_thumb_gallery thumb_active" />
		<div class="showcase_thumb_gallery_list_caption">{$row['showcase_place']}</div>
	    </li>
showcase_lits;
	    $showcase_id = $row['showcase_id'];
	    $showcase_detail_place = $row['showcase_place'];
	    $showcase_detail_ = $row['showcase_detail'];
	    $showcase_detail_img = "images/showcase/".$row['showcase_id']."/".$row['showcase_img'];
	}else{
	    $showcase_lits .=<<<showcase_lits
	    <li id="{$row['showcase_id']}">
		<img src="images/showcase/{$img__}" alt="{$row['showcase_place']}" class="showcase_thumb_gallery" />
		<div class="showcase_thumb_gallery_list_caption">{$row['showcase_place']}</div>
	    </li>
showcase_lits;
	}
	
	$i++;
    }
    
    $sql = "SELECT * FROM showcase_img WHERE showcase_id=$showcase_id AND showcase_img_show=1 ORDER BY img_position";
    $result = mysql_query($sql);
    $showcase_img_lits = '';
    
    if(mysql_num_rows($result)){
	while($row=mysql_fetch_assoc($result)){
		$showcase_img_lits .=<<<showcase_img_lits
		<img src="images/showcase/{$showcase_id}/{$row['showcase_img_path']}" alt="" class="showcase_gallery" />
showcase_img_lits;
	}
    }
    
    db_close($db);
?>
    <div id="showcase">
        <h3>ผลงาน</h3>
	
	<div id="showcase_thumb_gallery">
	    <div id="showcase_thumb_gallery_prev">
		<img src="images/showcase_thumb_gallery_prev.jpg" alt="Previous" class="showcase_thumb_gallery_prev" />
	    </div>
	    <div id="showcase_thumb_gallery_list">
		<ul>
		    <?php echo $showcase_lits; ?>
		</ul>
	    </div>
	    <div id="showcase_thumb_gallery_next">
		<img src="images/showcase_thumb_gallery_next.jpg" alt="Next" class="showcase_thumb_gallery_next" />
	    </div>
	    <div class="clear">&nbsp;</div>
	</div>
	
	<div id="showcase_detail">
	    <p>
		<span class="showcase_detail_title">สถานที่</span> : <span id="showcase_detail_place"><?php echo $showcase_detail_place; ?></span>
	    </p>
	    <p>
		<span class="showcase_detail_title">รายละเอียด</span> : <span id="showcase_detail_"><?php echo $showcase_detail_; ?></span>
	    </p>
	</div>
	<div id="showcase_gallery">
	    <div id="showcase_gallery__">
		<!--<li><img src="<?php echo $showcase_detail_img; ?>" alt="" class="showcase_gallery" /></li>-->
		<?php echo $showcase_img_lits; ?>
	    </div>
	    <div id="showcase_gallery_ctrl_prev">
		<img src="images/header_gallery_ctrl_left.png" alt="Previous" class="showcase_gallery_ctrl" id="showcase_gallery_ctrl_prev_" />
	    </div>
	    <div id="showcase_gallery_ctrl_next">
		<img src="images/header_gallery_ctrl_right.png" alt="Next" class="showcase_gallery_ctrl" id="showcase_gallery_ctrl_next_" />
	    </div>
	</div>
	<div class="clear">&nbsp;</div>
    </div>
    
    
    <script type="text/javascript">
	/**
	 * We use the initCallback callback
	 * to assign functionality to the controls
	 */
	function mycarousel_initCallback(carousel) {
	    jQuery('.showcase_thumb_gallery_next').bind('click', function() {
		carousel.next();
		return false;
	    });
	
	    jQuery('.showcase_thumb_gallery_prev').bind('click', function() {
		carousel.prev();
		return false;
	    });
	};
	
	function showcase_gallery(){
	    $('#showcase_gallery__').cycle({
		fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc....
		prev:   '#showcase_gallery_ctrl_prev', 
		next:   '#showcase_gallery_ctrl_next', 
		timeout: 1,
		pause: true,
		speed : 2000,
		delay: 2000
	    });
	}
	
	// Ride the carousel...
	jQuery(document).ready(function() {
	    jQuery("#showcase_thumb_gallery_list").jcarousel({
		scroll: 1,
		wrap: 'circular',
		initCallback: mycarousel_initCallback,
		// This tells jCarousel NOT to autobuild prev/next buttons
		buttonNextHTML: null,
		buttonPrevHTML: null
	    });
	    
	    $('#showcase_gallery__').cycle({
		fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc....
		prev:   '#showcase_gallery_ctrl_prev', 
		next:   '#showcase_gallery_ctrl_next', 
		timeout: 1,
		pause: true,
		speed : 2000,
		delay: 2000
	    });
	    
	    $('.showcase_thumb_gallery').click(function(){
		var thisEle = $(this);
		$('.showcase_thumb_gallery').removeClass('thumb_active');
		thisEle.addClass('thumb_active');
		
		$.post("function/showcase_load.php", { "showcase_id": thisEle.parent('li').attr('id') },function(data){
		    $('#showcase_gallery').html(data.showcase_gallery);
		    $('#showcase_detail_place').html(data.showcase_detail_place);
		    $('#showcase_detail_').html(data.showcase_detail_);
		    showcase_gallery();
		}, "json");
	    });
	    
	    $('.showcase_thumb_gallery_list_caption').click(function(){
		var thisEle = $(this);
		$('.showcase_thumb_gallery').removeClass('thumb_active');
		thisEle.addClass('thumb_active');
		
		$.post("function/showcase_load.php", { "showcase_id": thisEle.parent('li').attr('id') },function(data){
		    $('#showcase_gallery').html(data.showcase_gallery);
		    $('#showcase_detail_place').html(data.showcase_detail_place);
		    $('#showcase_detail_').html(data.showcase_detail_);
		    showcase_gallery();
		}, "json");
	    });
	});
	
	</script>
<?php
    include('footer.php');
?>